<template>
    <div class="mine">
        <Header title="我的" />
        <div class="content">
            <div class="user-info">
                <div class="info">
                    <img src="../../../public/header.jpeg">
                    <div class="user-desc">
                        <span class="name">昵称:{{ name }}</span>
                        <span>个性签名：{{ describe }}</span>
                    </div>
                </div>
            </div>
            <ul class="user-list">
                <li class="van-hairline--bottom" @click="togo('/creatOrde')">
                    <span>我的订单</span>
                    <van-icon name="arrow" class="van-icon-arrow"/>
                </li>
                <li class="van-hairline--bottom" @click="togo('/adress')">
                    <span>地址管理</span>
                    <van-icon name="arrow"  class="van-icon-arrow"/>
                </li>
                <li class="van-hairline--bottom" @click="togo('/userinfoe')">
                    <span>账号管理 </span>
                    <van-icon name="arrow"  class="van-icon-arrow"/>
                </li>
            </ul>
        </div>
        <Footer></Footer>
    </div>
</template>
<script >
import { defineComponent } from 'vue';
import Footer from '../../components/Footer.vue';
import Header from '../../components/Store_header.vue';
import { useRouter } from 'vue-router';
import { reactive } from 'vue';
import { toRefs } from 'vue';
export default defineComponent({
    name: 'mine',
    components: {
        Footer,
        Header
    },
    setup() {
        const router = useRouter();
        let userInfo = reactive({
            name: "李四", describe: "66666666666"
        })
        const togo = (path) => {
            router.push(path)
        }
        return {
            togo,
            ...toRefs(userInfo)
        }
    }

})
</script>
<style lang="less" scoped>
.mine {
    display: flex;
    flex-flow: column;
    height: 100%;

    .content {
        flex: 1;
        overflow-y: auto;
        .user-info{
            width: 94%;
            margin: 10px;
            height: 115px;
            background: linear-gradient(90deg,#ffc400,#c7c351);
            box-shadow: 0 2px 5px #ffc400;
            border-radius: 6px;
            .info{
                position: relative;
                display:flex;
                width: 100%;
                height: 100%;
                padding: 25px 20px;
                box-sizing: border-box;
                img{
                    border-radius: 50%;
                    margin-top: 4px;
                    height: 60px;
                    width: 60px;
                }
                .user-desc{
                    display: flex;
                    flex-direction: column;
                    margin-left: 10px;
                    line-height: 20px;
                    font-size: 14px;
                    color: #fff;
                    justify-content: space-between;
                    span{
                        color: #fff;
                        font-size: 14px;
                        padding: 2px 0;
                    }
                   
                }
               
               
            }
           
        }
        .user-list{
                padding: 0 20px;
                margin-top: 20px;
                background-color: #fff;
                li{
                    height: 40px;
                    line-height: 40px;
                    display: flex;
                    justify-content: space-between;
                    font-size: 14px;
                    .van-icon-arrow{
                        margin-top: 13px;

                    }

                }
            }
    }
}
</style>